<script>

import { dictMixin } from '@/mixin/dict'
import { parseSceneData } from '@/utils/scene-data'

export default {
  name: 'OperateCarbonSink',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      projectList: [],
      // typeList: [],
      carbonSinkList: [],
      roomList: [],
      formData: {}
    }
  },
  computed: {
    rules() {
      return {
        type: [
          { required: true, message: '请输入绿化名称' },
          { max: 100, message: '绿化名称最长100字符' }
        ],
        sceneProjectId: [{ required: true, message: '请选择所属项目' }],
        sceneInfo: [{ required: false, message: '请选择所属场景' }],
        carbonSinkId: [{ required: true, message: '请选择种植方式' }],
        area: [{ required: true, message: '请输入面积' }]
      }
    }
  },
  watch: {
    popData: {
      async handler(data) {
        this.isAdd = !data.id
        const obj = Object.assign({}, data)
        if (obj.sceneProjectId != null) {
          await this.projectChangeHandler(obj.sceneProjectId)
        }
        const sceneInfo = []
        if (obj.sceneEdificeId != null) {
          sceneInfo.push(obj.sceneEdificeId)
        }
        if (obj.sceneFloorId != null) {
          sceneInfo.push(obj.sceneFloorId)
        }
        if (obj.sceneRoomId != null) {
          sceneInfo.push(obj.sceneRoomId)
        }
        obj.sceneInfo = sceneInfo
        this.formData = obj;
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {})
      }
      params.sceneEdificeId = this.formData.sceneInfo.length > 0 ? this.formData.sceneInfo[0] : null
      params.sceneFloorId = this.formData.sceneInfo.length > 1 ? this.formData.sceneInfo[1] : null
      params.sceneRoomId = this.formData.sceneInfo.length > 2 ? this.formData.sceneInfo[2] : null
      this.submit(params)
    }
  },
  created() {
    this.loadingProjectData()
    this.loadingCarbonSinkData()
  },
  methods: {
    async loadingProjectData() {
      const res = await this.$api.commonSelected({
        code: 'SceneProjectSelected'
      })
      this.projectList = res.data
    },
    async loadingCarbonSinkData() {
      const res = await this.$api.commonSelected({
        code: 'CarbonSinkFactorSelected'
      })
      this.carbonSinkList = res.data
    },
    projectChangeHandler(value) {
      if (value == null || value === '') {
        this.roomList = []
      } else {
        this.$api.sceneRoom.queryRoomList({
          sceneProjectId: value,
          sortColumn: 'floorName',
          sortOrder: 'asc'
        }).then(response => {
          this.roomList = parseSceneData(response.data)
        })
      }
    },
    submit(params) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          delete params.createTm
          delete params.createBy
          delete params.modifyTm
          const res = await this.$api.carbonSink[this.isAdd ? 'add' : 'update'](params)
          if (Number(res.code) === 1000) {
            this.$message.success(`${this.isAdd ? '新增' : '编辑'}成功！`)
            this.$emit('onFinish', 'operate-carbonSink-add')
          }
        }
      })
    }
  }
}
</script>

<template>
  <div class="dialog-box">
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="所属项目" prop="sceneProjectId">
        <el-select v-model="formData.sceneProjectId" @change="projectChangeHandler" placeholder="请选择所属项目"
                   style="width: 100%">
          <el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属场景" prop="sceneInfo">
        <el-cascader placeholder="请选择所属场景" clearable :options="roomList" :props="{'checkStrictly' : true}"
                     v-model="formData.sceneInfo" style="width: 100%">
        </el-cascader>
      </el-form-item>
      <el-form-item label="绿化名称" prop="type">
        <el-input v-model="formData.type" placeholder="请输入绿化名称" />
      </el-form-item>
      <el-form-item label="种植方式" prop="carbonSinkId">
        <el-select placeholder="请选择" v-model="formData.carbonSinkId" style="width: 100%">
          <el-option v-for="item in carbonSinkList" :key="item.value" :value="item.value"
                     :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="面积（㎡）" prop="area">
        <el-input-number :min="0" v-model="formData.area" style="width: 100%" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
